<template>
  <div>
    <el-button-group v-if="showWhole" size="mini">
      <el-button @click="operateAll('OPEN')">
        <i class="el-icon-caret-left" />{{ $t('On') }}<i class="el-icon-caret-right" /></el-button>
      <el-button @click="operateAll('CLOSE')">
        <i class="el-icon-caret-right" />{{ $t('Off') }}<i class="el-icon-caret-left" /></el-button>
      <el-button icon="el-icon-video-pause" @click="operateAll('STOP')">{{ $t('Stop') }}</el-button>
    </el-button-group>
    <div v-if="showList">
      <div v-for="(item,index) in list" :key="'curtain_'+index">
        <el-button-group>
          <el-button @click="onOperate('OPEN',item.devMac)">
            <i class="el-icon-caret-left" />{{ $t('On') }}<i class="el-icon-caret-right" /></el-button>
          <el-button @click="onOperate('CLOSE',item.devMac)">
            <i class="el-icon-caret-right" />{{ $t('Off') }}<i class="el-icon-caret-left" /></el-button>
          <el-button icon="el-icon-video-pause" @click="onOperate('STOP',item.devMac)">{{ $t('Stop') }}</el-button>
        </el-button-group>
      </div>
    </div>
  </div>
</template>
<script>
  import Common from './common'
  export default {
    name: "Curtain",
    mixins: [Common],
    data() {
      return {
        all: false,
        onOff: false
      }
    },
    computed: {
      list() {
        const list = []
        for (var k in this.map) {
          list.push(this.map[k])
        }
        return list
      }
    },
    watch: {
      device(nv) {
        if (!nv || !nv.devMac) {
          return
        }
        const obj = {}
        obj[nv.devMac] = nv
        this.map = Object.assign({}, this.map, obj)
      }
    },
    methods: {
      onOperate(command, DevMac) {
        var message = {}
        if (command === 'OPEN') {
          message = {
            "Position": 0
          }
        } else if (command === 'CLOSE') {
          message = {
            "Position": 100
          }
        } else if (command === 'STOP') {
          message = {
            "Stop": 1
          }
        }
        const content = {
          PackageType: 0,
          DeviceControl: {
            DevMac,
            Message: message
          }
        }
        this.deviceCommand('control', JSON.stringify(content))
      },
      operateAll(command) {
        for (var i = 0; i < this.list.length; i++) {
          const item = this.list[i]
          this.onOperate(command, item.devMac)
        }
      },
    }
  }

</script>
